<template>
  <table class="cart" border="1" width="400">
    <tr>
      <td>选中</td>
      <td>名称</td>
      <td>数量</td>
      <td>操作</td>
    </tr>
    <tr v-for="item in goods" :key="item.id">
      <td><input type="checkbox" :checked="item.flag" @change="changeCheck(item.id, $event)"></td>
      <td>{{ item.name }}</td>
      <td>
        <button @click="diff(item.id)" v-show="item.num !== 1">-</button>
        {{ item.num }}
        <button @click="add(item.id)" v-if="item.num !== item.stock">+</button>
        <span v-else>卖完了</span>
      </td>
      <td @click="del(item.id)">删除</td>
    </tr>
    <tr>
      <td><input type="checkbox" :checked="allCheck()" @change="changeAllCheck">全选</td>
      <td align="right">总数量：</td>
      <td>{{ allNum() }}</td>
      <td @click="delAll">删除选中</td>
    </tr>
  </table>
</template>

<script>
export default {
  name:"Cart",
  data(){
    return {
      goods: [{
        id:"7q83243tg",
        name:"手机",
        num: 1,
        stock: 10,
        flag: false
      },{
        id:"456868",
        name:"电脑",
        num: 2,
        stock: 20,
        flag: true
      },{
        id:"234245",
        name:"音箱",
        num: 1,
        stock: 5,
        flag: false
      },{
        id:"sdgsfdg",
        name:"耳机",
        num: 5,
        stock: 15,
        flag: false
      }]
    }
  },
  methods:{
    diff(id){
      // 根据传入的商品id，修改对应数据的数量
      this.goods[ this.getIndex(id) ].num--;
    },
    add(id){
      // 根据传入的商品id，修改对应数据的数量
      this.goods[ this.getIndex(id) ].num++;
    },
    del(id){
      // 根据传入的商品id，删除指定数据
      this.goods.splice(this.getIndex(id), 1);
    },
    changeCheck(id, e){
      // 根据传入的商品id，修改选中状态
      this.goods[ this.getIndex(id) ].flag = e.target.checked;
    },
    allNum(){
      // 根据总数据，计算总数量
      return this.goods.reduce((prev,val)=>prev+val.num, 0);
    },
    allCheck(){
      // 根据总数据，计算是否需要全选
      return this.goods.every(val=>val.flag);
    },
    changeAllCheck(e){
      // 根据全选按钮的状态，修改单个商品数据的状态
      this.goods.forEach(val=>{
        val.flag = e.target.checked
      })
    },
    delAll(){
      // 删除选中的商品数据（过滤出未选中的商品数据）
      this.goods = this.goods.filter(val=>!val.flag);
    },
    getIndex(id){
      // 根据id，获取当前id对应商品的索引
      let i = 0;
      this.goods.some((val,idx)=>{
        i = idx;
        return val.id === id;
      });
      return i;
    }
  }
}
</script>

<style>
</style>
